<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宿舍分配详情</title>
    <!--导入网页图标 -->
    <link rel="icon" href="../../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入layUI css库 -->
    <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}"
          media="all">
    <!--导入公共的css，其中可定义整个网页的配色方案 -->
    <link rel="stylesheet" href="../../static/css/common.css" th:href="@{/css/common.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 页面的header -->
    <div th:replace="admin/_fragments :: admin-header" class="layui-header">
        <a href="javascript:void(0)">
            <div id="l-logo" class="layui-logo">学生住宿管理系统</div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a class="layui-icon layui-icon-shrink-right" href="javascript:void(0)"></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:void(0)">
                    <img src="../../static/images/default.ico"
                         th:src="${(session.currentUser==null||session.currentUser.avatar==null||session.currentUser.avatar=='')?'/images/avatar.jpg':session.currentUser.avatar}"
                         class="layui-nav-img" alt="">
                    <span th:text="${session.currentUser==null?'未登录':(session.currentUser.username==null?'':session.currentUser.username)}">用户名</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user">个人中心</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">安全退出</a></li>
        </ul>
    </div>
    <!-- 页面的menu/左边的导航栏 -->
    <div th:replace="admin/_fragments :: admin-menu" id="div_side_bg" class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="nav-dom">
                <li class="layui-nav-item">
                    <a class="" href="javascript:void(0)">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/user-list}">用户列表</a></dd>
                        <!--<dd><a href="javascript:void(0)" th:href="@{/admin/role-list}">角色与权限</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">学生管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/student-list}">学生列表</a></dd>
                        <dd><a href="javascript:void(0)" th:href="@{/admin/teaching-class-list}">教学班级</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">宿舍管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/room-list}">寝室列表</a></dd>
                        <dd><a href="javascript:void(0)" th:href="@{/admin/category-list}">寝室类型</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:void(0)">入住管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/room-request-list}" id="c_y">住宿申请<span
                                class="layui-badge"
                                th:text="${session.noHandleCount==null?'0':session.noHandleCount}">6</span></a></dd>
                        <dd><a href="javascript:void(0)" th:href="@{/admin/allocation-list}">宿舍分配详情</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="width: 94%;height:92%; margin:auto">
            <!-- 面包屑-->
            <div style="margin-top: 10px">
                <span class="layui-breadcrumb" lay-separator=" | ">
                <a href="/admin/index">首页</a>
                <a href="/admin/allocation-list">宿舍分配详情</a>
                </span>
            </div>
            <div class="search" style="padding-top: 10px;">
                <div class="layui-form layui-form-item layui-inline" style="margin-bottom: 0">
                    <input type="text" id="q_key_word" placeholder="请输入关键词" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form layui-form-item layui-inline" style="margin-bottom: 0">
                    <select id="q_query_type" lay-filter="">
                        <option value="0" selected="">根据学生姓名查找</option>
                        <option value="1">根据寝室查找</option>
                        <option value="2">根据班级查找</option>
                    </select>
                </div>
                <button class="layui-btn layui-icon layui-icon-search" id="search_btn" data-type="reload"></button>
            </div>
            <table class="layui-hide" id="data-table" lay-filter="data-table"></table>
        </div>
        <div hidden id="info" th:text="${#strings.isEmpty(info)?'':info}"></div>
        <div hidden id="error" th:text="${#strings.isEmpty(error)?'':error}"></div>
    </div>
    <div th:replace="admin/_fragments :: admin-footer" class="layui-footer" id="sdms-footer"></div>
</div>
<!--导入footer -->
<script src="../../static/js/footer.js" th:src="@{/js/footer.js}"></script>
<!--导入jQuery库 -->
<script src="../../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
<!--导入cookie库 -->
<script src="../../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
<!--导入layUI js库 -->
<script src="../../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
<!--导入公共的js，其中实现了菜单按钮的点击事件-->
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="releaseBatch">批量解约</button>
    </div>
</script>
<script type="text/html" id="rowBar">
    <a class="layui-btn layui-btn-xs" lay-event="release">解约</a>
</script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form', 'table'], function () {
        var table = layui.table;
        var $ = layui.$;
        var layer = layui.layer;
        // 弹出错误信息
        var $error = $('#error');
        if ($error.text() !== '') {
            layer.msg($error.text(), {icon: 2, offset: 'c', time: 1000});
        }
        // 弹出提示信息
        var $info = $('#info');
        if ($info.text() !== '') {
            layer.msg($info.text(), {icon: 1, offset: 'c', time: 1000});
        }
        var releaseByIds = function (ids) {
            $.post("/admin/allocation/release?ids=" + ids, function (resp) {
                if (resp.code === 0) {
                    layer.msg("解约成功", {icon: 1, offset: 'c', time: 800});
                    window.location.reload();
                } else {
                    layer.msg("解约失败", {icon: 2, offset: 'c', time: 1000});
                }
            });
        }
        // 为表格配置查询条件
        var active = {
            reload: function () {
                //执行重载
                table.reload('table_id', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        //查询条件
                        queryType: parseInt($("#q_query_type").val()),
                        param: {
                            keyWord: $("#q_key_word").val()
                        }
                        //这里可以传对象
                    }
                });
            }
        };
        //搜索框点击事件
        $('#search_btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // 渲染表格
        table.render({
            elem: '#data-table',
            url: '/admin/allocations',
            method: 'post',
            contentType: 'application/json',
            toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print'],
            title: '宿舍分配数据表',
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'id',
                    title: '学号',
                    width: 140
                }, {
                    field: 'name',
                    title: '姓名',
                    width: 160,
                    templet: function (data) {
                        if (typeof data.id != "undefined"
                            && data.id != null
                            && typeof data.name != "undefined"
                            && data.name != null) {
                            return "<span><a style=\"color:cornflowerblue\" target=\"_blank\" href=\"/admin/student/detail?id=" + data.id + "\">" + data.name + "</a></span>";
                        } else {
                            return "";
                        }
                    }
                }, {
                    field: 'teachingClassName',
                    title: '班级',
                    width: 160
                }, {
                    field: 'roomName',
                    title: '寝室',
                    width: 160,
                    templet: function (data) {
                        if (typeof data.roomId != "undefined"
                            && data.roomId != null
                            && typeof data.roomName != "undefined"
                            && data.roomName != null) {
                            return "<span><a style=\"color:cornflowerblue\" target=\"_blank\" href=\"/admin/room/detail?id=" + data.roomId + "\">" + data.roomName + "</a></span>";
                        } else {
                            return "";
                        }
                    }
                }, {
                    field: 'phone',
                    title: '联系方式'
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#rowBar',
                    width: 65
                }]
            ],
            page: true,
            id: 'table_id'
        });
        // 监听头工具栏事件
        table.on('toolbar(data-table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'releaseBatch':
                    var dataArray = checkStatus.data;
                    if (dataArray.length === 0) {
                        layer.msg("没有选中的对象");
                    } else {
                        var names = [];
                        var ids = [];
                        for (var i = 0; i < dataArray.length; i++) {
                            names.push(dataArray[i].name);
                            ids.push(dataArray[i].id);
                        }
                        layer.confirm("确定要为" + names + "等人完成寝室解约操作?", {icon: 0, title: '提示'}, function (index) {
                            releaseByIds(ids);
                            layer.close(index);
                        });
                    }
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(data-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'release') {
                layer.confirm("确定要为" + data.name + "完成寝室解约操作?", {icon: 0, title: '提示'}, function (index) {
                    releaseByIds(data.id);
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>